<template>
  <div class="charts charts-click">
    <Tabs :value="activeTab" @on-click="changeTab"> 
      <template v-for="(chartItem, chartIndex) in charts.chartsConfig">
        <TabPane :label="chartItem.tabTape.label" :name="chartItem.tabTape.name" :key="chartIndex">
        </TabPane>
      </template>  
    </Tabs>
    <section>
      <template v-if="btns.length">
        <div class="btn-content">
          <RadioGroup v-model="activeBtn" size="small" type="button">
            <template v-for="(btnItem,btnIndex) in btns">
              <Radio :label="btnItem.option_value" :key="btnIndex">{{btnItem.option_text}}</Radio>
            </template>
          </RadioGroup>
        </div>
      </template>
      <template v-for="(chartItemx,chartIndexx) in activeCharts">
          <SingleChart @sendConfig="receiveConfig" :chartItemx="chartItemx" :chartIndex="chartIndexx" :key="chartIndexx" :params="params"> </SingleChart>
      </template>
    </section>
    
    <transition name="slide-fade">
      <div v-show="showMaxChart">
        <MaxChart ref="maxChart"></MaxChart>
      </div>
    </transition>
  </div>
</template>

<script>
import SingleChart from '@/components/single-chart'
import MaxChart from '@/components/max-chart'
export default {
  name: '',
  data() {
    return {
      activeTab:  '',
      activeCharts: {},
      btns: [],
      tagsUrl: '',
      params: {},
      showMaxChart: false,
      activeBtn: '',
    }
  },
  props: {
    charts: Object
  },
  watch: {
    activeBtn: function () {
      this.pitchOnBtn()
    }
  },
  mounted () {
    if (this.charts.chartsConfig.length !== 0) {
      this.activeCharts = this.charts.chartsConfig[0].charts
      this.refreshCharts()
    }
  },
  methods: {
    refreshCharts () {
      if (this.$root.$validate.isEmpty_reset(this.activeTab) || 
      this.charts.chartsConfig.findIndex((element)=>(element.tabTape.name == this.activeTab)) === -1) {
        this.activeTab = this.charts.chartsConfig[0].tabTape.name
      } 
      this.changeTab(this.activeTab)
    },
    changeTab (name) {
      this.params = this.charts.chartsConfig[0].params
      this.activeTab = name
      this.activeCharts = []
      this.btns = []
      this.charts.chartsConfig.forEach((item) => {
        if (item.tabTape.name === name) {
          this.btns = item.btns
          if (this.btns.length !== 0) {
            this.activeBtn = this.btns[0].option_value
          }
          this.tagsUrl = item.tagsUrl     
          this.$nextTick(() => {
            this.activeCharts = item.charts
          })
        }
      })
    },
    pitchOnBtn() {
      this.$root.$httpRequestEntrance.httpRequestEntrance('GET',this.tagsUrl +  this.activeBtn, '', responseData => {
        this.activeCharts.forEach((element,index) => {
           element.metric = responseData[index].metric
        })
        this.activeCharts = []
        this.charts.chartsConfig.forEach((item) => {
          if (item.tabTape.name === this.activeTab) {    
            this.$nextTick(() => {
              this.activeCharts = item.charts
            })
          }
        })

      })
    },
    hiddenDetailChart () {
      // this.showMaxChart = false
    },
    receiveConfig (chartItem) {
      this.showMaxChart = true
      this.$refs.maxChart.getChartConfig(chartItem)
      return
    }
  },
  components: {
    SingleChart,
    MaxChart
  }
}
</script>
<style scoped lang="less">
  .charts {
    padding-top: 20px;
  }

  .btn-content {
  padding: 2px;
  }

  /* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s ease;
}
</style>
